<template>
  <div class="ano-templates">
    <AnoHeader />

    <AnoNav :active="navActive" />

    <div class="templates-content">
      <div class="templates-section">
        <ul class="templates-list">
          <li class="item" 
            v-for="(item, index) in templates" 
            :key="index">
            <div class="txt">{{ item.title }}</div>
            <div class="cnt" @click="handleTemplatesSelect">
              <img class="img" :src="item.imgUrl" alt="">
            </div>
            <div class="classes">
              <div class="row" v-for="(child, childIndex) in item.list" :key="childIndex">
                <el-link 
                  @click="handleTemplatesSelect">
                  {{ child.name }}
                </el-link>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="templates-section">
        <ul class="templates-list">
          <li class="item" 
            v-for="(item, index) in templates" 
            :key="index">
            <div class="txt">{{ item.title }}</div>
            <div class="cnt" @click="handleTemplatesSelect">
              <img class="img" :src="item.imgUrl" alt="">
            </div>
            <div class="classes">
              <div class="row" v-for="(child, childIndex) in item.list" :key="childIndex">
                <el-link 
                  @click="handleTemplatesSelect">
                  {{ child.name }}
                </el-link>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <AnoFooter />
  </div>
</template>

<script>
import AnoHeader from '@/components/anoHeader'
import AnoNav from '@/components/anoNav'
import AnoFooter from '@/components/anoFooter'

export default {
  name: "templates",
  components: {
    AnoHeader,
    AnoNav,
    AnoFooter
  },
  data() {
    return {
      navActive: 2,
      templates: [
        {
          title: 'Trending',
          imgUrl: require('../../assets/imgs/tmp1.png'),
          list: [
            {name: 'Most Popular',},
            {name: 'Animals & Pets',},
            {name: 'Most Popular',},
            {name: 'Fourth of July',},
            {name: 'Most Popular',},
          ]
        },
        {
          title: 'K-12 School',
          imgUrl: require('../../assets/imgs/tmp2.png'),
          list: [
            {name: 'Most Popular',},
            {name: 'Animals & Pets',},
            {name: 'Most Popular',},
            {name: 'Fourth of July',},
            {name: 'Most Popular',},
          ]
        },
        {
          title: 'Parties & Events',
          imgUrl: require('../../assets/imgs/tmp3.png'),
          list: [
            {name: 'Most Popular',},
            {name: 'Animals & Pets',},
            {name: 'Most Popular',},
            {name: 'Fourth of July',},
            {name: 'Most Popular',},
          ]
        },
        {
          title: 'Business',
          imgUrl: require('../../assets/imgs/tmp4.png'),
          list: [
            {name: 'Most Popular',},
            {name: 'Animals & Pets',},
            {name: 'Most Popular',},
            {name: 'Fourth of July',},
            {name: 'Most Popular',},
          ]
        },
      ]
    }
  },
  methods: {
    handleTemplatesSelect() {
      this.$router.push({ name: 'design' })
    }
  }
};
</script>

<style lang="less" scoped>
.templates-list {
  max-width: 1320px;
  margin: 40px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .item {
    text-align: center;
    padding: 15px;
    background-color: white;
    cursor: pointer;
    user-select: none;
    .txt {
      color: #444444;
      font-weight: bold;
      text-align: left;
      font-size: 18px;
    }
    .cnt {
      margin-top: 10px;
    }
    .img {
      width: 300px;
      height: 300px;
    }
    .classes {
      margin-top: 4px;
      font-size: 16px;
      text-align: left;
      .el-link {
        font-size: 16px;
        line-height: 1.5;
      }
    }
  }
}
</style>
